<template>
    <div class="echarts-study">
        <div ref="echartsDemo" class="container"></div>
    </div>
</template>

<script>
/* 
echarts使用
    1. 先下载 
        npm install echarts --save
    2. 在引入
        import * as echarts from 'echarts';
    3. 新建div作为echarts渲染的容器 => 配置容器宽高
    4. echarts相关配置  => 往往伴随着数据处理
    5. 基于准备好的dom，初始化echarts实例


*/


import * as echarts from 'echarts';
export default {
    name: "EchartsView",
    data() {
        return {
            // echarts配置
            options: {
                title: {
                    text: '我的第一个Echarts图标'
                },
                // 提示工具
                tooltip: {
                    show: true,  // 是否展示提示工具
                    right:0,
                    top:0,
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none"
                        },
                        dataView: {
                            readOnly: false
                        },
                        magicType: {
                            type: ["line", "bar"]
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                // 系列中的分类
                legend: {
                    data: ["销量", "价格", "库存"]
                },
                // x轴 => 相关信息
                xAxis: {
                    type: "category",  // 类目轴
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // 分类
                },
                // y轴  => 相关信息
                yAxis: {
                    // type:"value"    // 数值轴
                },
                // 系列 => 用于存储各种Echarts图的数据
                series: [
                    {
                        name: '销量',
                        type: 'bar',  // 柱状图(bar)  折线图(line)  饼状图(pie)
                        data: [5, 20, 36, 10, 10, 20]
                    },
                    {
                        name: '价格',
                        type: 'bar',
                        data: [9.15, 200, 136, 95, 200, 3.3]
                    },
                    {
                        name: '库存',
                        type: 'bar',
                        data: [200, 22, 36, 45, 120, 300]
                    }
                ]
            },
            myEcharts: null,

        }
    },
    methods: {
        initEcharts() {
            // 初始化 echarts实例  => // 基于准备好的dom，初始化echarts实例
            this.myEcharts = echarts.init(this.$refs.echartsDemo);

            // 绘制图表
            this.myEcharts.setOption(this.options);

            this.myEcharts.on("click", function (params) {
                console.log(params);
            })

            window.addEventListener("resize", () => {
                this.myEcharts.resize();
            })

        }
    },
    mounted() {
        this.initEcharts();
    }
}
</script>

<style lang="scss" scoped>
.container {
    // width: 800px;
    width: 100%;
    height: 400px;
}
</style>